<template>
  <section class="d-flex align-items-center">
    <div class="cover flex-1 d-flex align-items-center">
      <div class="img">
        
        <img v-lazy="readedBook != undefined && readedBook.booksVo != undefined ? readedBook.booksVo.booksCover : ''" alt="img" />
      </div>
    </div>
    <div class="title flex-2">
      
      <h2>{{readedBook != undefined  && readedBook.booksVo != undefined ? readedBook.booksVo.booksName : ''}}</h2>
      <p>读至 {{readedBook != undefined ? readedBook.step * 100 : 0}}%  继续阅读</p>
    </div>
  </section>
</template>

<script>
export default {
  name: "ReadedBooks",
  props: {
    readedBook: Object
  }
};
</script>

<style lang="stylus" scoped>
@import '~assets/css/style.styl';

section {
  height: 30vh;
  background: url('~assets/img/background1.png') no-repeat center center;
  color: #FFF;

  .cover {
    .img {
      width: 22vw;
      height: 28vw;
      background #FFF
      margin 30px 0 0 35px
      img {
        width 100%
        height 100%
      }
    }
  }

  .title {
    padding-left 20px
    font-size 18px
    line-height 26px
    ellipsis()
    p {
      font-size 14px
      color rgba(255, 255, 255, 0.8)
    }
  }
}
</style>
